<!--
 * @Description:简单的css轮播图
 * @Author: Sun
 * @Date: 2019-07-01 20:05:50
 * @LastEditors: Sun
 * @LastEditTime: 2019-07-24 21:40:17
 -->
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>简单的css轮播图</title>
	<style>
		* {
			margin: 0;
			padding: 0;
			list-style-type: none;
		}

		.all {
			width: 500px;
			height: 200px;
			padding: 7px;
			border: 1px solid #ccc;
			margin: 100px auto;
			position: relative;
		}

		.screen {
			width: 500px;
			height: 200px;
			overflow: hidden;
			position: relative;
		}

		.screen li {
			float: left;
		}

		.screen li img,
		.screen li {
			width: 500px;
			height: 200px;
			overflow: hidden;
		}

		.screen ul {
			position: absolute;
			left: 0;
			top: 0;
			width: 3000px;
		}

		.all ol {
			position: absolute;
			right: 10px;
			bottom: 10px;
			line-height: 20px;
			text-align: center;
		}

		.all ol li {
			float: left;
			width: 20px;
			height: 20px;
			background: #fff;
			border: 1px solid #ccc;
			margin-left: 10px;
			cursor: pointer;
		}

		.all ol li.current {
			background: yellow;
		}
	</style>
	<script>
		//封装匀速运动
		function animate(obj, target, speed) {
			clearInterval(obj.timer)
			//物体左边距大于目标距离 - 否则 +
			var speedis = obj.offsetLeft > target ? -speed : speed
			obj.timer = setInterval(() => {
				var result = target - obj.offsetLeft //因为差值不会小于5
				obj.style.left = obj.offsetLeft + speedis + "px"
				if (Math.abs(result) <= speed) { //何时停止 小于步长speed 
					clearInterval(obj.timer) //说明已经到达位置了
					obj.style.left = target + "px"
				}
			}, 30)
		}
		window.onload = function () {
			function $(id) {
				return document.getElementById(id);
			}
			var box = $("all")
			var ul = $("ul")
			var ulLis = ul.children;
			console.log("lm" + ulLis.length)
			//克隆最后一张图片
			ul.appendChild(ul.children[0].cloneNode(true))
			//动态生成小圆点
			var ol = document.createElement("ol")
			box.appendChild(ol)
			for (let index = 0; index < ulLis.length - 1; index++) {
				var li = document.createElement("li")
				li.innerHTML = index + 1
				ol.appendChild(li)
			}
			ol.children[0].className = "current"

			//开始动画部分
			var olLis = ol.children; //变色
			for (let index = 0; index < olLis.length; index++) {
				const element = olLis[index];
				element.onmouseover = function () {
					for (let ix = 0; ix < olLis.length; ix++) {
						const et = olLis[ix];
						et.className = ""
					}
					element.className = "current"
					animate(ul, -index * 500, 16)
					square=key=index//鼠标放上去 暂停
				}
			}

			//添加定时器
			var timer=null;
			var key=0;//控制播发张数
			var square=0;
			timer=setInterval(autoplay,2000)
			function autoplay(){
				key++;//先++ 后判断 
				if(key>ulLis.length-1){
					ul.style.left=0;//迅速调回
					key=1
				}
        animate(ul, -key * 500, 16)
        //小方块 运动
				square++
				if(square>olLis.length-1){
					square=0
				}
				for (let index = 0; index < olLis.length; index++) {
					const element = olLis[index];
					element.className=""
				}
				olLis[square].className = "current"
			}

			//鼠标经过大盒子 停止定时器

			box.onmouseover=function(){
				clearInterval(timer)
			}

	 		box.onmouseout=function(){
			  timer=setInterval(autoplay,2600);
			}

		}
	</script>
</head>

<body>
	<div id="all" class="all">
		<!-- img -->
		<div class="screen">
			<ul id="ul">
				<li><img src="img/1.jpg" alt=""></li>
				<li><img src="img/2.jpg" alt=""></li>
				<li><img src="img/3.jpg" alt=""></li>
				<li><img src="img/4.png" alt=""></li>
				<li><img src="img/wei/main_pic1.png" alt=""></li>
			</ul>
		</div>
		<!-- . -->
	</div>
</body>

</html>